<template>
	<view class="Ask" :class="theme">
		<!-- <u-navbar title="提问" leftIconSize="0" :bgColor="theme == 'light' ? '#0071ff' : '#2c2c2c'"
			:safeAreaInsetTop="true" :placeholder="true" titleStyle="color:#fff">
		</u-navbar> -->

		<view class="above">
			<view class="title">提问</view>
			<view class="title2">智能对话</view>
		</view>

		<view class="content">
			<view style="margin: 10rpx 0rpx;">填写您的问题</view>
			<u-textarea v-model="value" height="130px" ref="textarea" confirmType="done"
				placeholder="支持长按粘贴您的问题"></u-textarea>
			<view class="content_btn">
				<view><u-button type="primary" :plain="true" @click="acquire(0)" text="清空对话框"></u-button></view>
				<view><u-button type="primary" @click="acquire(1)" text="获取问题答案"></u-button></view>
			</view>
		</view>

		<view class="characteristic">
			<view class="title">功能特性</view>

			<view class="char">
				<view class="item" v-for="item,index in charList" :key="index">
					<view>
						<u--image :showLoading="true" :src="item.img" width="24px" height="24px"></u--image>
					</view>
					<view class="telie">
						{{item.h}}
					</view>
					<view style="font-size: 24rpx;color: #c0c4cc;">
						{{item.t}}
					</view>
				</view>

			</view>
		</view>

		<tabbar ref="tabBar" />
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	export default {
		data() {
			return {
				value: '',
				charList: [{
						img: require('../../static/AI.png'),
						h: 'AI回答',
						t: '轻松获取',
					},
					{
						img: require('../../static/Tidy.png'),
						h: '智能答案',
						t: '免去千篇一律',
					},
					{
						img: require('../../static/Answer.png'),
						h: '自动整理',
						t: '免去繁琐搜索',
					},
					{
						img: require('../../static/write.png'),
						h: '引导写作',
						t: '发散思维',
					},
					{
						img: require('../../static/restriction.png'),
						h: '存在限制',
						t: '会有偏见内容',
					},
					{
						img: require('../../static/tool.png'),
						h: '在线工具',
						t: '简单高效',
					},
				]
			}
		},
		methods: {
			acquire(e) {
				if (e == 0) {
					this.value = ''
				} else {
					return uni.showToast({
						title: "请稍后，更新中。",
						icon: "none"
					});
				}
			},
		},
		computed: {
			...mapState(['tabbar', 'theme', 'model'])

		},
	};
</script>

<style lang="scss" scoped>
	.Ask {
		height: 100%;
		background-color: var(--bg);

		.above {
			background-color: #4b74f1;
			width: 100%;
			height: 420rpx;
			border-radius: 0rpx 0rpx 40% 40%;
			text-align: center;
			color: white;
			padding: 20px;

			.title {
				font-weight: bold;
				font-size: 36rpx;
			}

			.title2 {
				margin-top: 45rpx;
			}
		}

		.content {
			background-color: white;
			padding: 20rpx;
			margin: 20rpx;
			position: relative;
			top: -200rpx;
			height: 500rpx;
			border-radius: 10rpx;

			.content_btn {
				display: flex;
				justify-content: space-between;

				view {
					margin-top: 10px;
					width: 46%;
				}
			}
		}

		.characteristic {
			position: relative;
			top: -200rpx;

			.title {
				margin: 20rpx;
				color: #4b74f1;
			}

			.char {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-evenly;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 30%;
					margin-bottom: 12rpx;
					padding: 20rpx;
					background-color: #e6effd;
					border-radius: 6rpx;

					.telie {
						color: #4b74f1;
						font-size: 26rpx;
						font-weight: bold;
						margin: 7rpx;
					}
				}
			}
		}
	}
</style>